import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { ActivityIndicator,Toast, Modal } from 'antd-mobile';
import { List, InputItem,Button } from 'antd-mobile';

import 'antd-mobile/lib/activity-indicator/style/index.css';
import 'antd-mobile/lib/toast/style/index.css';
import 'antd-mobile/lib/modal/style/index.css';
import 'antd-mobile/lib/list/style/index.css';
import 'antd-mobile/lib/input-item/style/index.css';
import 'antd-mobile/lib/button/style/index.css';
import { get, post } from '../api/getData';
import Hdgz from '../components/Hdgz';
import {getQueryString} from '../utils/util';

import '../static/styles/index.css';

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chose: 0,
            goods:[],
            animating:false,
            hdgz: false,
            isbind:true,
            cyCount:18888
        };
    }

    componentDidMount() {
        let __this = this;
        __this.setState({
            animating: true
        });

        get('/api/activity/goods', {}, function(error, data){
            if(error === null){
                let goods = [];
                for (var i = 0; i < data.data.length; i++) {
                    if(i == 4){
                        goods.push([]);
                        goods.push(data.data[i]);
                    }else{
                        goods.push(data.data[i]);
                    }
                }
                __this.setState({
                    goods: goods,
                    animating: false
                });
            }
        });

        get('/api/activity/cy-count', {}, function(error, data){
            if(error === null){
                __this.setState({
                    cyCount:data.data
                });
            }
        });
        document.title = '中秋佳节';
    }

    chose (chose){
        let __this = this;
        __this.setState({
            animating: true
        });
        get('/api/activity/user/is-bind-mobile', {}, function(error, data){
            if(error === null){
                __this.setState({chose});
            }else{
                __this.setState({
                    isbind: false
                });
            }

            __this.setState({
                animating: false
            });
        });
    }

    confirm(){
        var chose = this.state.chose;
        if(chose > 0){
            this.setState({
                animating: true
            });
            post('/api/activity/goods/chose', {goods_id:chose}, function(error, data){
                if(error !== null){
                    Toast.fail(error, 1, function(){
                        window.location.href = '/share?token='+getQueryString('token')+'&wid='+getQueryString('wid');
                    });
                }else{
                    Toast.success('提交成功', 1, function(){
                        window.location.href = '/share?token='+getQueryString('token')+'&wid='+getQueryString('wid');
                    });
                }
            });
            this.setState({
                animating: false
            });
        }
    }

    onCloseModal() {
        this.setState({hdgz:false});
    }
    showModel(){
        this.setState({hdgz:true});
    }

    getYzm(){
        let __this = this;
        let mobile = this.refs.mobile.value;
        this.setState({
            animating: true
        });
        post('/api/send/check/code', {mobile:mobile}, function(error, data){
            if(error !== null){
                Toast.fail(error, 1, function(){

                });
            }else{
                Toast.success('发送成功', 1, function(){});
            }
            __this.setState({
                animating: false
            });
        });
    }

    bindMobile(){
        let __this = this;
        let mobile = this.refs.mobile.value;
        let code = this.refs.code.value;
        post('/api/activity/user/bind-mobile', {mobile:mobile, code:code}, function(error, data){
            if(error !== null){
                Toast.fail(error, 1, function(){});
            }else{
                Toast.success('绑定成功', 1, function(){
                    __this.setState({
                        isbind: true
                    });
                });
            }
            __this.setState({
                animating: false
            });
        });
    }

    render() {
        return <div className='moon-bg'>
            <ActivityIndicator
                toast
                text="加载中..."
                animating={this.state.animating}
             />
            <div className='moon-index-content'>
                <div className='moon-index-wfgl'>玩法攻略</div>
                <div className='moon-index-notice'>选择你最爱的月饼口味分享给好友或朋友圈好友猜中你的心意增加默契值，达量抽奖</div>
                <div className='moon-index-goods-list'>
                {
                    this.state.goods.map((item, index) => {
                        return (
                            index === 4?
                            <div key='0' className='moon-index-goods sure' onClick={() => this.confirm()}>
                                <img src={require("../static/imgs/queding@2x.png")} alt='确定选择'/>
                                <div>参加人数:{this.state.cyCount}</div>
                            </div>
                            :
                            this.state.chose === item.id?
                            <div key={item.id} className='moon-index-goods active' onClick={() => this.chose(item.id)}>
                                <img src={item.img_url} alt={item.title}/>
                                <img className='moon-index-goods-title' src={require(`../static/imgs/goods-title/${item.title}@2x.png`)} alt={item.title}/>
                                <div className='chose'></div>
                            </div>
                            :
                            <div key={item.id} className='moon-index-goods' onClick={() => this.chose(item.id)}>
                                <img src={item.img_url} alt={item.title}/>
                                <img className='moon-index-goods-title' src={require(`../static/imgs/goods-title/${item.title}@2x.png`)} alt={item.title}/>
                                <div className='chose'></div>
                            </div>
                        )
                    })
                }

                </div>
            </div>
            <div className='moon-index-hdgz' onClick={()=>this.showModel()}>活动规则</div>
            {
                this.state.isbind === false?
                <div className='bind-mobile'>
                    <div className='am-modal-mask'></div>
                    <div className='bind-mobile-content'>
                        <div className='bind-mobile-top'>请输入手机号参与活动</div>
                        <div className='bind-mobile-input-content'>
                            <div className='bind-mobile-input-item'>
                                <input placeholder='请输入手机号' ref='mobile' type='text' />
                                <div onClick={() => this.getYzm()}>获取验证码</div>
                            </div>
                            <div className='bind-mobile-input-item yzm'>
                                <input placeholder='请输入验证码' ref='code' type='text' />
                            </div>
                        </div>
                        <div className='bind-mobile-button' onClick={() => this.bindMobile()}>
                            <img src={require('../static/imgs/bind-button@2x.png')}/>
                        </div>
                    </div>
                </div>
                :''
            }

            <Hdgz hdgz={this.state.hdgz} onCloseModal={this.onCloseModal.bind(this)}></Hdgz>
        </div>
    }
}

export default Index;
